<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>充值</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, maximum-scale=1, user-scalable=no,viewport-fit=cover">
    <link href="css/common.css" rel="stylesheet">
    <script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <style>
        .bd-b-red{
            border-bottom: 1px solid #00aaff;
            padding: 2vw;
        }
        .grey-tip{
            padding: 4vw 0 1vw 2vw;
            color: #b7b7b7;
        }
        #chargeMoney{
            width: 95%;
            font-size: 16px;
            line-height: 38px;
            text-align: center;
            border: 0px;
        }
        .block{
            padding:2vw 0.5vw;
        }

        .block div{
            width: 30%;
            display: inline-block;
            background: #fff;
            padding: 3vw 0;
            text-align: center;
            border: 1px solid #d3d2d2;
            margin:0 0.8vw;
        }
        .block .live{
            background: #00aaff;
            color: #fff;
            border: 1px solid #28a2e4;
        }
        .red-tip{
            padding: 4vw 0 2vw 2vw;
            color: red;
        }
        .pay-line{
            height: 40px;
            background: #fff;
            padding: 3vw;
            margin-bottom: 3vw;
        }
        .pay-text{
            margin-left: 3vw;
            font-size: 0.9em;
            color: #908f8f;
        }
    </style>
</head>
<body>
<div class="head-nav">
    <div class="nav-left" onclick="goCenter()"><img src="img/gua/u18.png"></div>
    <div class="nav-title">充值</div>
</div>
<div class="main">
    <div class="bd-b-red">当前账户：<span id="phoneStr">未绑定手机号</span></div>
    <div class="grey-tip">请输入充值金额</div>
    <div>
        <input id="chargeMoney" type="number" value="10"/>
    </div>
    <div style="height: 3vw"></div>
    <div>
        <div class="block">
            <div data-value="10" class="money-link live">10元</div>
            <div data-value="50" class="money-link">50元</div>
            <div data-value="100" class="money-link">100元</div>
        </div>
        <div class="block">
            <div data-value="200" class="money-link">200元</div>
            <div data-value="500" class="money-link">500元</div>
            <div data-value="1000" class="money-link">1000元</div>
        </div>
    </div>
    <div class="red-tip">选择支付方式</div>
    <div class="pay-line">
        <div class="fl-left"><img src="img/gua/icon_wx.jpg" style="width: 40px"></div>
        <div class="fl-left pay-text">
            <div>微信支付</div>
            <div>支付限额0—3000</div>
        </div>
        <div class="fl-right"><img src="img/gua/check_on.png" style="width: 30px;margin-top: 6px;"></div>
    </div>
    <div style="height: 6vw"></div>
    <div class="btn-line" id="chargeBtn">立即充值</div>
</div>

<script src="js/jquery-1.8.0.min.js"></script>
<script src="js/common.js"></script>
<script src="js/jquery.cookie.js"></script>
<script src="https://cdn.bootcss.com/layer/3.0.1/layer.min.js"></script>

<script type="application/javascript">
    var phoneNum;
    $(function () {
        phoneNum = window.localStorage.getItem("phoneNum");
        var phoneStr = phoneNum.substr(0,3)+"****"+phoneNum.substr(7,4);
        $("#phoneStr").text(phoneStr);
        getopenid();
    });

    $(".money-link").on("click",function () {
        var money = $(this).attr("data-value");
        $("#chargeMoney").val(money);
        $(".money-link").removeClass("live");
        $(this).addClass("live");
    });
    
    $("#chargeBtn").on("click",function () {
        var chargeMoney = $("#chargeMoney").val();
        //检查金额是否合法
        var reg=/^[1-9]+\d*$/;
        if(!reg.test(chargeMoney)){
            layer.msg("请输入整数金额！");
            return;
        }
        if(!phoneNum){
            layer.msg("手机号缺失请刷新页面！");
            return;
        }
        createOrder(chargeMoney);

    });

    var openid;
    function getopenid() {
        openid = window.localStorage.getItem("openid");
        if(openid == null || openid == undefined || openid == '') {
            getCode();
        }
    }
    function getCode() {
        var code = Common.queryGetParam('code');
        if(code == null || code == undefined || code == '') {
            location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx95bdc635798fcfe4&redirect_uri="+window.location.href+"&response_type=code&scope=snsapi_base#wechat_redirect";
            return;
        }
        var paramStr = {};
        paramStr.code = code;
        var params = {};
        params.paramStr = JSON.stringify(paramStr);
        Common.ajaxWithParam("/fenful/api/v1/common/getWxUserOpenId", params, function(data) {
            openid = data.openid;
            window.localStorage.setItem("openid", data.openid);
        },false);
    }
    function createOrder(totalAmount) {

        var paramStr = {};
        paramStr.phoneNum = phoneNum;
        paramStr.openid = openid;
        paramStr.totalAmount = totalAmount;
        paramStr.typeId ="18";
        var params = {};
        params.paramStr = JSON.stringify(paramStr);

        Common.ajaxWithParam("/fenful/api/v1/common/weixinCreateOrder", params, function(data) {
            console.log(data);
            var paramStr = {};
            paramStr.appId = data.appId;
            paramStr.timeStamp = data.timeStamp;
            paramStr.nonceStr = data.nonce_str;
            paramStr.package = data.prepay_id;
            paramStr.signType = data.signType;
            paramStr.paySign = data.sign;
            recharge(paramStr);
        });

    }

    function recharge(paramStr) {

        WeixinJSBridge.invoke(
            'getBrandWCPayRequest', {
                "appId": paramStr.appId, //公众号名称，由商户传入
                "timeStamp": paramStr.timeStamp, //时间戳，自1970年以来的秒数
                "nonceStr": paramStr.nonceStr, //随机串
                "package": paramStr.package,
                "signType": paramStr.signType, //微信签名方式：
                "paySign": paramStr.paySign //微信签名
            },
            function(result) {
                if(result.err_msg == "get_brand_wcpay_request:cancel") {
                    layer.alert("用户取消了充值！");
                } else {
                    layer.alert("充值成功！");
                    //跳转页面
                    location.href = "http://"+window.location.host+"/fenful/h5/myAccount.html";
                }
            }
        );
    }
    
    function goCenter() {
        window.location.href = "myAccount.html";
    }
</script>
</body>
</html>